<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      table {
        margin: 10px auto;
        border: 1px solid black;
        border-collapse: collapse;
      }
      table tr:first-child {
        background-color: gray;
      }
      td,
      th {
        border: 1px solid black;
        text-align: center;
      }
      table td {
        padding: 10px 20px;
      }
      .clsImg {
        position: absolute;
        top: -10px;
        left: 235px;
        border: solid 1px #ccc;
        padding: 3px;
        width: 85px;
        height: 120px;
        background-color: #eee;
        /*display: none;*/
      }
      .btn {
        border: #666 1px solid;
        padding: 2px;
        width: 50px;
      }
    </style>
  </head>
  <body>
    <table class="data">
      <tr>
        <th>选项</th>
        <th>编号</th>
        <th>封面</th>
        <th>购书人</th>
        <th>性别</th>
        <th>购书价</th>
      </tr>
      <tr id="0">
        <td><input type="checkbox" id="Checkbox1" value="0" /></td>
        <td>101</td>
        <td>
          <img src="./images/01.jpg" alt="图片" width="40px" height="60px" />
        </td>
        <td>李晓明</td>
        <td>男</td>
        <td>35.60元</td>
      </tr>
      <tr id="1">
        <td><input type="checkbox" id="Checkbox2" value="1" /></td>
        <td>102</td>
        <td>
          <img src="./images/02.jpg" alt="图片" width="40px" height="60px" />
        </td>
        <td>王大同</td>
        <td>女</td>
        <td>39.60元</td>
      </tr>
      <tr id="2">
        <td><input type="checkbox" id="Checkbox3" value="2" /></td>
        <td>103</td>
        <td>
          <img src="./images/03.jpg" alt="图片" width="40px" height="60px" />
        </td>
        <td>张晓心</td>
        <td>女</td>
        <td>15.60元</td>
      </tr>
      <tr>
        <td colspan="6" style="text-align: left; height: 28px">
          <span><input type="checkbox" id="chAll" />全选 </span>
          <span
            ><input type="button" value="删除" class="btn" id="btnDel"
          /></span>
        </td>
      </tr>
    </table>
    <img id="imgTip" class="clsImg" src="images/01.jpg" />
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //隔行显示不同颜色
    $(".data tr:nth-child(even)").css({
      backgroundColor: "#eee",
    });
    //单击”全选“时选中所有图书
    $("#chAll").click(function () {
      if (this.checked) {
        $(".data input[type=checkbox]").attr("checked", true);
      } else {
        $(".data input[type=checkbox]").attr("checked", false);
      }
    });
    //单击”删除“按钮执行删除操作
    $("#btnDel").click(function () {
      var ckAll = $(".data input[type=checkbox]");
      if (ckAll.length > 0) {
        //如果有数据
        /*$.each(ckAll,function(index,item){
            if(this.checked){
                console.log(index)
            }
        })*/
        for (var i in ckAll) {
          if (ckAll[i].checked) {
            console.log(i);
            console.log($(ckAll[i]).parent().parent()); //找父级
            $(ckAll[i]).parent().parent().empty(); //清空
          }
        }
      }
    });
    //鼠标移动到图片上时预览该图片
    var x = 5,
      y = 15; //初始化提示图片位置
    $(".data img").mousemove(function (e) {
      console.log($(this).attr("src"));
      $(".clsImg")
        .attr("src", $(this).attr("src")) //改变图片路径
        .fadeIn(1000)
        .css({
          top: e.pageY + y + "px",
          lsft: e.pageX + x + "px",
        });
    });
    //鼠标移开时不现实预览图
    $(".data img").mouseout(function () {
      //$(".clsImg").fadeOut();
      $(".clsImg").hide();
    });
  </script>
</html>
